<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="isEdit ? '修改区域' : '新增区域'"
    width="800px"
    :visible.sync="visible"
  >
    <el-form :rules="rules" :model="form" ref="form" label-width="80px">
      <el-form-item label="上级区域">
        <area-select
          :disabled="parentSelect"
          ref="areaSelect"
          class="w393-mr20 fl w440"
          :selectValue="form.parentId"
          v-model="form.parentId"
          @select="handleDeptSelect"
        />
        <!-- <el-input :disabled="parentSelect" class="w393-mr20" v-model="selectObj.parentName" /> -->
        <el-checkbox v-model="parentSelect" @change="checkChange">顶级菜单</el-checkbox>
      </el-form-item>
      <el-form-item v-show="false" label="上级区域ID">
        <el-input :disabled="true" v-model="selectObj.parentId" />
      </el-form-item>
      <el-form-item v-show="false" label="区域ID">
        <el-input :disabled="true" v-model="form.areaId" />
      </el-form-item>

      <el-form-item label="区域名称" prop="areaName">
        <el-input type="text" autocomplete="false" placeholder="请输入区域名称" v-model="form.areaName" />
      </el-form-item>
      <el-form-item label="排序" prop="areaOrder">
        <el-input-number
          placeholder="请输入排序值"
          :min="0"
          :max="100"
          controls-position="right"
          v-model.number="form.areaOrder"
          allowClear
        />
      </el-form-item>
      <!-- <el-form-item label="是否删除">
        <el-radio-group name="allowDelete" v-model="form.flag">
          <el-radio :label="false">否</el-radio>
          <el-radio :label="true">是</el-radio>
        </el-radio-group>
      </el-form-item>-->
    </el-form>
    <div slot="footer">
      <el-button @click="handleCancel">取消</el-button>
      <el-button @click="handleOk" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { insertArea, updateArea } from '@/api/department'
import { openNotification } from '@/utils/util'
import AreaSelect from './AreaSelect'

export default {
  components: {
    AreaSelect
  },
  data() {
    return {
      parentSelect: true,
      visible: false,
      isEdit: false,
      form: {
        areaId: null,
        areaName: null,
        areaOrder: 0,
        remark: null,
        leaf: false
      },
      rules: {
        areaName: [{ required: true, message: '请输入区域名称', trigger: 'blur' }],
        areaOrder: [{ type: 'number', message: '排序值必须是一个数字' }]
      },
      confirmLoading: false,
      selectObj: {}
    }
  },
  methods: {
    reset() {
      this.$nextTick(() => {
        this.parentSelect = true
        this.$set(this.form, 'parentId', null)
        this.$refs.areaSelect.reset()
      })
    },
    checkChange(e) {
      console.log('e', e)
      if (e) {
        this.reset()
      } else {
        this.parentSelect = false
      }
    },
    edit(bool, record) {
      console.log('edit', bool, record)
      this.isEdit = bool
      this.form = Object.assign({}, record)
      if (!record.parentId) {
        this.reset()
      } else {
        this.parentSelect = false
      }
      if (!bool) {
        // 开始选择部门，后面取消掉选择的情况
        this.form.areaOrder = 0
        this.form.leaf = false
      }
      this.visible = true
    },
    async handleOk(e) {
      e.stopPropagation()
      this.$refs.form.validate(async valid => {
        if (valid) {
          let mes = '',
            res = ''
          if (this.isEdit) {
            mes = '修改操作成功'
            res = await updateArea(this.form)
            console.log('update res', res)
          } else {
            mes = '新增操作成功'
            res = await insertArea(this.form)
          }
          if (res.state === '000000') {
            openNotification('success', mes)
            this.confirmLoading = false
            this.visible = false
            this.$emit('refresh')
          }
        }
      })
    },
    handleCancel() {
      this.$nextTick(() => {
        this.visible = false
      })
    },
    handleDeptSelect(value) {
      this.$set(this.form, 'parentId', value.key)
    }
  }
}
</script>
